<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>复杂表头</title>
    <script type="text/javascript" src="./../../../static/js/include/_include-css.js"></script>

</head>

<body class="bg-gray">
    <div class="wrapper">
        <div class="wrapper-container">
            <div class="row">
                <div class="col-md-12">
                    <div class="panel">
                        <div class="panel-body-sm">
                            <table id="bootstrap-table" class="table-bordered"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="./../../../static/js/include/_include-js.js"></script>

    <script type="text/javascript">
        $(function () {
            var options = {
                url: "./../../../static/data/list.json",
                method: 'get',
                showSearch: false,
                showRefresh: false,
                showToggle: false,
                showColumns: false,
                clickToSelect: true,
                sidePagination: 'client',
                columns:
                    [
                        [{
                            title: '基本信息',
                            align: 'center',
                            colspan: 4
                        }, {
                            title: '联系方式',
                            align: 'center',
                            colspan: 2
                        }, {
                            title: '其他信息',
                            align: 'center',
                            colspan: 3
                        }
                        ],
                        [{
                            checkbox: true
                        },
                        {
                            title: '序号',
                            width: 5,
                            align: "center",
                            formatter: function (value, row, index) {
                                return $.table.serialNumber(index);
                            }
                        },
                        {
                            field: 'code',
                            title: '用户编号'
                        },
                        {
                            field: 'name',
                            title: '用户姓名'
                        },
                        {
                            field: 'phone',
                            title: '用户手机'
                        },
                        {
                            field: 'mail',
                            title: '用户邮箱'
                        },
                        {
                            field: 'account',
                            title: '账户金额'
                        },
                        {
                            field: 'status',
                            title: '用户状态',
                            formatter: function (value, row, index) {
                                if (value == 1) {
                                    return '<label class="badge badge-primary">正常</label>';
                                } else {
                                    return '<label class="badge badge-danger">停用</label>';
                                }
                            }
                        },
                        {
                            title: '操作',
                            align: 'center',
                            formatter: function (value, row, index) {
                                var actions = [];
                                actions.push('<a class="btn btn-primary btn-xs" href="#"><i class="fa fa-edit"></i>编辑</a> ');
                                actions.push('<a class="btn btn-danger btn-xs" href="#"><i class="fa fa-remove"></i>删除</a>');
                                return actions.join('');
                            }
                        }]
                    ]
            };
            $.table.init(options);
        });
    </script>
</body>

</html>